<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑个人信息</title>
    <style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.main{
			display: flex;
			margin: 0 auto;
			margin-top: 50px;
			width: 800px;
			height: auto;
			overflow: hidden;
			border-radius: 10px;
			background-color: #c9d8cd;
		}
		.main .left{
			padding: 10px;
			width: 500px;
			height: 100%;
			border-right: 0.125rem solid navajowhite;
			background-color: #c9d8cd;
		}
		.main .left form{
			padding: 10px;
			width: 470px;
			height: 100%;
			border-radius: 20px;
			background-color: #c9d8cd;
		}
		.main .right{
			float: right;
			width: 280px;
			height: 400px;
			box-shadow:inset 20px 25px 15px rgba(0,0,0,0.5);
			padding: 55px 64px 0;
			background: url(../static/img/1.png) no-repeat;
			background-size: cover;
		}
    </style>
	<link rel="stylesheet" href="../static/layui/css/layui.css"/>
</head>
<div class="main">
    <div class="left">
		<h2>编辑个人资料</h2>
		<hr />
		<form id="form" class="layui-form" action="" >
		  <div class="layui-form-item">
		    <label class="layui-form-label">用户名:</label>
		    <div class="layui-input-inline">
		      <input id="name" type="text" name="name" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
		    </div>
		  </div>
		  
		  <div class="layui-form-item">
		    <label class="layui-form-label">性别:</label>
		    <div class="layui-input-block">
		      <input type="radio" name="sex" value="男" title="男" checked>
		      <input type="radio" name="sex" value="女" title="女" >
		    </div>
		  </div>

		  <div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">出生日期:</label>
				<div class="layui-input-inline">
				  <input id="birthday" type="text" name="birthday" class="layui-input" placeholder="请选择出生日期">
				</div>
			</div>
		  </div>

		  <div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">手机号:</label>
		      <div class="layui-input-inline">
		        <input id="phone" type="text" name="phone" placeholder="请输入手机号" lay-verify="required|confirmPhone" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		  </div>
		  <div class="layui-form-item">
				<label class="layui-form-label">请输入住址:</label>
			  <div class="layui-black" style="margin-left: 110px">
				  <div class="layui-input-black">
					  <input type="text" id="address" name="address" placeholder="住址" class="layui-input" placeholder="请确认密码" lay-verify="required">
				  </div>
			  </div>
		  </div>
		  <br /><br />
		  
		  <div class="layui-form-item">
		    <div class="btn-div layui-input-block" style="float: right;">
		      <button class="layui-btn" lay-submit lay-filter="formDemo">更新</button>
		      <button type="reset" class="layui-btn layui-btn-danger">重置</button>
		    </div>
		  </div>
		  
		</form>
	</div>
	<div class="right">
	</div>
</div>
</body>
<script src="../static/js/jquery-3.0.0.min.js" type="text/javascript"></script>
<script src="../static/layui/layui.js" charset="utf-8"></script>
<script src="../static/js/area.js" type="text/javascript"></script>
<script src="../static/js/select.js" type="text/javascript"></script>
<script>
	$(document).ready(function(){
		$.ajax({
			url:"/user/getUser",
			type:"post",
			headers: {
				Authorization: sessionStorage.Authorization
			},
			success:function(result){
				if(result.code==200){
					let user = result.data;
					$("#name").attr("value",user.name);
					$("#sex").attr("value",user.sex);
					$("#birthday").attr("value",user.birthday.split(" ")[0]);
					$("#phone").attr("value",user.phone);
					$("#address").attr("value",user.address);
				}else{
					layer.msg(result.msg,{icon: 2,time:2000});
				}
			}
		})
	});
	layui.use(['form','laydate'],function(){
		var form = layui.form
		,laydate = layui.laydate
		,reg=/^1\d{10}$/;
	  
	  form.verify({
		    confirmPhone:function(value){
				if(!reg.test($('input[name=phone]').val())){
				     return '提示：电话号码有误！';
				}
			}
	  });
	  //监听提交
		form.on('submit(formDemo)', function(data){
			data = data.field;
			$.ajax({
				url:"/user/edit",
				type:"post",
				data:{
					"id" : sessionStorage.uid,
					"name" : data.name,
					"phone" : data.phone,
					"sex" : data.sex,
					"birthday" : data.birthday,
					"address" : data.address
				},
				headers: {
					Authorization: sessionStorage.Authorization
				},
				success:function(result){
					if (result.code == 200) {
						layer.msg("更新成功！",{icon: 1,time:2000,},function(){window.location.replace("../index.html")});
					}else if(result.code==401){
						sessionStorage.removeItem("Authorization");
						layer.msg(result.msg,{icon: 2,time:2000},function(){window.location.href="../index.html"});
					}else{
						layer.msg(result.msg,{icon: 2,time:2000});
					}
				}
			});
			return false;
		});
		laydate.render({
			elem: '#birthday',
			max:0
		});
	});

</script>
</html>